<!DOCTYPE html>
<html lang="en">
<head>
    <title>知乎用户统计</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3 col-sm-4 col-xs-12">
                <div id="main" style="height:400px;"></div>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-12">
                <div id="followers" style="height:400px;"></div>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-12">
                <div id="agrees" style="height:400px;"></div>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-12">
                <div id="answers" style="height:400px;"></div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/3.7.0/echarts.min.js"></script>
    <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    $.get("data", function(data) {
        // 指定图表的配置项和数据
        option = {
            title : {
                text: '知乎用户男女比例',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['男','女','未知']
            },
            series : [
                {
                    name: '男女比例',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:data.male, name:'男'},
                        {value:data.female, name:'女'},
                        {value:data.unknown, name:'未知'},
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        var followersChart = echarts.init(document.getElementById('followers'));
        var followerNames = JSON.stringify(data.followersNames);
        followerNames = JSON.parse(followerNames);
        var followers = JSON.stringify(data.followers);
        followers = JSON.parse(followers);
        followersOption = myOption('粉丝', followerNames, followers);
        followersChart.setOption(followersOption);

        var agreesChart = echarts.init(document.getElementById('agrees'));
        var agrees = JSON.stringify(data.agrees);
        agrees = JSON.parse(agrees);
        var agreeNames = JSON.stringify(data.agreesNames);
        agreeNames = JSON.parse(agreeNames);
        agreesOption = myOption('赞同', agreeNames, agrees);
        agreesChart.setOption(agreesOption);

        var answersChart = echarts.init(document.getElementById('answers'));
        var answers = JSON.stringify(data.answers);
        answers = JSON.parse(answers);
        var answerNames = JSON.stringify(data.answersNames);
        answerNames = JSON.parse(answerNames);
        answersOption = myOption('回答', answerNames, answers);
        answersChart.setOption(answersOption);
    });
    function myOption (title, names, data) {
        return {
            title : {
                text: '知乎' + title + '数TOP10',
                x:'center'
            },
            color: ['#3398DB'],
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : names,
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:title + '数',
                    type:'bar',
                    barWidth: '60%',
                    data: data
                }
            ]
        }
    }
    </script>
</body>
</html>